<!DOCTYPE html>
<html lang="zh-Hans" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>RNButtonGroup 按钮组组件 | nero-ui</title>
    <meta name="description" content="基于 Vue3 的企业级组件库">
    <meta name="generator" content="VitePress v1.0.0-rc.31">
    <link rel="preload stylesheet" href="/assets/style.CeFEy2pb.css" as="style">
    
    <script type="module" src="/assets/app.Ct36hRSC.js"></script>
    <link rel="modulepreload" href="/assets/chunks/naive-ui.DyEX4l5m.js">
    <link rel="modulepreload" href="/assets/chunks/plugin-vue_export-helper.BCo6x5W8.js">
    <link rel="modulepreload" href="/assets/chunks/preload-helper.DZ_bAA1L.js">
    <link rel="modulepreload" href="/assets/chunks/VPLocalSearchBox.CF68xPUh.js">
    <link rel="modulepreload" href="/assets/chunks/index.vue_vue_type_script_setup_true_lang.C9Xc3vaO.js">
    <link rel="modulepreload" href="/assets/chunks/index.BsjzT1UF.js">
    <link rel="modulepreload" href="/assets/components_RNButtonGroup.md.CVDev2h3.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
    <link rel="manifest" href="/manifest.webmanifest">
    <script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script>
  </head>
  <body>
    <div id="app"><!--[--><div><div class="Layout" data-v-ca1291ff><!--[--><!--]--><!--[--><span tabindex="-1" data-v-04fcd50f></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-04fcd50f> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ca1291ff data-v-62072cd2><div class="VPNavBar" data-v-62072cd2 data-v-d96d2835><div class="container" data-v-d96d2835><div class="title" data-v-d96d2835><div class="VPNavBarTitle has-sidebar" data-v-d96d2835 data-v-02535974><a class="title" href="/" data-v-02535974><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://vitejs.cn/vite3-cn/logo-with-shadow.png" alt data-v-b5affa81><!--]--><!--[-->nero-ui<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-d96d2835><div class="curtain" data-v-d96d2835></div><div class="content-body" data-v-d96d2835><!--[--><!--]--><div class="VPNavBarSearch search" data-v-d96d2835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="搜索文档"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">搜索文档</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-d96d2835 data-v-fc1dd50f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-fc1dd50f data-v-8f951cdf data-v-5c26f5a1><span class="check" data-v-5c26f5a1><span class="icon" data-v-5c26f5a1><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-8f951cdf><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-8f951cdf><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-d96d2835 data-v-4183c642 data-v-351ace95><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-351ace95><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-351ace95><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-351ace95><div class="VPMenu" data-v-351ace95 data-v-c0965437><!----><!--[--><!--[--><!----><div class="group" data-v-4183c642><div class="item appearance" data-v-4183c642><p class="label" data-v-4183c642>主题</p><div class="appearance-action" data-v-4183c642><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-4183c642 data-v-8f951cdf data-v-5c26f5a1><span class="check" data-v-5c26f5a1><span class="icon" data-v-5c26f5a1><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-8f951cdf><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-8f951cdf><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-d96d2835 data-v-cbc20759><span class="container" data-v-cbc20759><span class="top" data-v-cbc20759></span><span class="middle" data-v-cbc20759></span><span class="bottom" data-v-cbc20759></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-ca1291ff data-v-518c957c><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-518c957c><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-518c957c><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-518c957c>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-518c957c data-v-a418f7bf><button data-v-a418f7bf>回到顶部</button><!----></div></div><aside class="VPSidebar" data-v-ca1291ff data-v-4798b359><div class="curtain" data-v-4798b359></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-4798b359><span class="visually-hidden" id="sidebar-aria-label" data-v-4798b359> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>可视化图表</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNChartCore.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNChartCore 核心图表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNChartPie.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNChartPie 环形统计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNChartBar.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNChartBar 柱状统计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNChartLine.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNChartLine 折线统计</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>反馈组件</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/alert.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>alert 消息弹窗</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/message.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>message 消息提示</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/notification.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>notification 消息通知</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/modal.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>modal 弹层模态框</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>基础组件</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNButtonAction.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNButtonAction 操作組</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNButtonGroup.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNButtonGroup 按钮组</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNCarousel.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNCarousel 轮播面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/tabs-panel.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>Tabs Panel 标签面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/skeleton.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>Skeleton 骨架屏</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>布局组件</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNTreePanel.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNTreePanel 树形面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNStickyPane.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNStickyPane 粘性面板</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>数据选择</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNRadioGroup.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNRadioGroup 单选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNCheckboxGroup.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNCheckboxGroup 复选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNSelectNext.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNSelectNext 数据选择</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNSelectTreeNext.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNSelectTreeNext 数据选择</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>数据展示</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNStatistic.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNStatistic 数据统计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNProgress.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNProgress 柱状进度和数据</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNDashboard.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNDashboard 环形进度和数据</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-4798b359><section class="VPSidebarItem level-0 collapsible" data-v-4798b359 data-v-b61c7c65><div class="item" role="button" tabindex="0" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><h2 class="text" data-v-b61c7c65>有趣的组合</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b61c7c65><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-b61c7c65><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-b61c7c65><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNCarouselMix.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNCarousel 面板切换</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b61c7c65 data-v-b61c7c65><div class="item" data-v-b61c7c65><div class="indicator" data-v-b61c7c65></div><a class="VPLink link link" href="/components/RNCarouselMix.html" data-v-b61c7c65><!--[--><p class="text" data-v-b61c7c65>RNCarousel 面板切换</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ca1291ff data-v-a56db8d6><div class="VPDoc has-sidebar has-aside" data-v-a56db8d6 data-v-27741305><!--[--><!--]--><div class="container" data-v-27741305><div class="aside" data-v-27741305><div class="aside-curtain" data-v-27741305></div><div class="aside-container" data-v-27741305><div class="aside-content" data-v-27741305><div class="VPDocAside" data-v-27741305 data-v-10669140><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-10669140 data-v-5d77af7f><div class="content" data-v-5d77af7f><div class="outline-marker" data-v-5d77af7f></div><div class="outline-title" role="heading" aria-level="2" data-v-5d77af7f>页面导航</div><nav aria-labelledby="doc-outline-aria-label" data-v-5d77af7f><span class="visually-hidden" id="doc-outline-aria-label" data-v-5d77af7f> Table of Contents for current page </span><ul class="root" data-v-5d77af7f data-v-b20a55b1><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-10669140></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-27741305><div class="content-container" data-v-27741305><!--[--><!--]--><!----><main class="main" data-v-27741305><div style="position:relative;" class="vp-doc _components_RNButtonGroup" data-v-27741305><div><h1 id="rnbuttongroup-按钮组组件" tabindex="-1">RNButtonGroup 按钮组组件 <a class="header-anchor" href="#rnbuttongroup-按钮组组件" aria-label="Permalink to &quot;RNButtonGroup 按钮组组件&quot;">​</a></h1><p>按钮排排队组件</p><ul><li>👶 让按钮们乖乖排好队</li><li>🎨 统一管理它们的样式</li><li>🎯 轻松处理点击事件</li><li>🔄 支持双向绑定</li></ul><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p>最简单的按钮组用法。</p><!----><h2 id="配置透明" tabindex="-1">配置透明 <a class="header-anchor" href="#配置透明" aria-label="Permalink to &quot;配置透明&quot;">​</a></h2><p>见<code>ghost</code>鬼了, 脸都吓白了。</p><!----><h2 id="配置高亮" tabindex="-1">配置高亮 <a class="header-anchor" href="#配置高亮" aria-label="Permalink to &quot;配置高亮&quot;">​</a></h2><p>支持主题色的按钮组,高亮一下表示激活选中了。</p><!----><h2 id="配置大小" tabindex="-1">配置大小 <a class="header-anchor" href="#配置大小" aria-label="Permalink to &quot;配置大小&quot;">​</a></h2><p>没大没小, 不同场景可能需要的大小不一致。</p><!----><h2 id="是否垂直" tabindex="-1">是否垂直 <a class="header-anchor" href="#是否垂直" aria-label="Permalink to &quot;是否垂直&quot;">​</a></h2><p>我直了</p><!----><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h2 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>options</td><td>按钮配置项</td><td><code>ButtonOption[]</code></td><td><code>[]</code></td></tr><tr><td>primary</td><td>是否使用主题色</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>size</td><td>按钮大小</td><td><code>&#39;tiny&#39; | &#39;small&#39; | &#39;medium&#39; | &#39;large&#39;</code></td><td><code>&#39;small&#39;</code></td></tr><tr><td>vertical</td><td>是否垂直排列</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>value(v-model)</td><td>当前选中值</td><td><code>string | number</code></td><td>-</td></tr></tbody></table><h2 id="buttonoption-配置项" tabindex="-1">ButtonOption 配置项 <a class="header-anchor" href="#buttonoption-配置项" aria-label="Permalink to &quot;ButtonOption 配置项&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>label</td><td>按钮文本</td><td><code>string</code></td><td>-</td></tr><tr><td>value</td><td>按钮值</td><td><code>string | number</code></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td>type</td><td>按钮类型</td><td><code>&#39;default&#39; | &#39;primary&#39; | &#39;info&#39; | &#39;success&#39; | &#39;warning&#39; | &#39;error&#39;</code></td><td><code>&#39;default&#39;</code></td></tr><tr><td>onClick</td><td>点击回调</td><td><code>(option: ButtonOption) =&gt; void</code></td><td>-</td></tr></tbody></table><h2 id="事件" tabindex="-1">事件 <a class="header-anchor" href="#事件" aria-label="Permalink to &quot;事件&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>update:value</td><td>值更新时触发</td><td><code>(value: string | number, option: ButtonOption) =&gt; void</code></td></tr></tbody></table><h2 id="继承的属性" tabindex="-1">继承的属性 <a class="header-anchor" href="#继承的属性" aria-label="Permalink to &quot;继承的属性&quot;">​</a></h2><p>组件继承了 Naive UI 的 <code>n-button-group</code> 的所有属性：</p><ul><li><code>size</code>：按钮组大小</li><li><code>vertical</code>：是否垂直排列</li><li>等等...</li></ul><h2 id="注意事项" tabindex="-1">注意事项 <a class="header-anchor" href="#注意事项" aria-label="Permalink to &quot;注意事项&quot;">​</a></h2><ol><li><p>样式处理：</p><ul><li>通过 <code>primary</code> 属性控制是否使用主题色</li><li>每个按钮可以单独设置 <code>type</code> 属性</li><li>支持统一的尺寸控制</li></ul></li><li><p>事件处理：</p><ul><li>支持 v-model 双向绑定</li><li>可以通过 <code>onClick</code> 处理单个按钮点击</li><li><code>update:value</code> 事件提供完整的选项信息</li></ul></li><li><p>布局控制：</p><ul><li>默认水平排列</li><li>通过 <code>vertical</code> 属性切换垂直排列</li><li>按钮宽度会自适应内容</li></ul></li><li><p>状态管理：</p><ul><li>支持按钮禁用状态</li><li>选中状态通过 value 控制</li><li>支持动态更新选项</li></ul></li><li><p>性能优化：</p><ul><li>选项变化时会自动缓存计算结果</li><li>避免不必要的重渲染</li></ul></li></ol></div></div></main><!----><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-ca1291ff data-v-0e0f6ff1><div class="container" data-v-0e0f6ff1><p class="message" data-v-0e0f6ff1>基于 MIT 许可发布.</p><p class="copyright" data-v-0e0f6ff1>Copyright © 2024-2025 v1.0.0</p></div></footer><!--[--><!--]--></div><!--[--><css-render-style></css-render-style><!--]--></div><!--]--></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_rnbuttonaction.md\":\"CHALPa3q\",\"components_rnbuttongroup.md\":\"CVDev2h3\",\"components_rncarousel.md\":\"C_LVB4cr\",\"components_rncarouselmix.md\":\"DRVuUkZ_\",\"components_rnchartbar.md\":\"D2czHsw_\",\"components_rnchartcore.md\":\"DuiH3mjq\",\"components_rnchartline.md\":\"D0pwr2wR\",\"components_rnchartpie.md\":\"ChNLOuQQ\",\"components_rncheckboxgroup.md\":\"DIqjS8Ue\",\"components_rndashboard.md\":\"CBPwg0Fh\",\"components_rnprogress.md\":\"C-K-qI_A\",\"components_rnproviderfeedback.md\":\"C8zrVOAv\",\"components_rnradiogroup.md\":\"CphIP3sb\",\"components_rnselectnext.md\":\"PdZlyAYW\",\"components_rnselecttreenext.md\":\"Dzu9Y4Kd\",\"components_rnskeleton.md\":\"BwOUBI_M\",\"components_rnstatistic.md\":\"C-20zk2X\",\"components_rnstatusaction.md\":\"CbWBALmn\",\"components_rnstickypane.md\":\"CX-EZ6sE\",\"components_rntabsbutton.md\":\"DaGNBbkc\",\"components_rntabspanel.md\":\"C_KW1aCz\",\"components_rntreepanel.md\":\"63qyJn62\",\"components_alert.md\":\"B6IWACe9\",\"components_empty.md\":\"YpMMySq-\",\"components_index.md\":\"BsAcJiHk\",\"components_loading.md\":\"EPgpcv5O\",\"components_message.md\":\"BZf5PFec\",\"components_modal.md\":\"D_P30mVY\",\"components_notification.md\":\"ClWU1_DM\",\"components_provider-theme.md\":\"DdT-RlpD\",\"index.md\":\"Cw_ZvZB-\",\"specification_code-review-guidelines.md\":\"CRcHyz31\",\"specification_codeinspection.md\":\"C2vn0Xu1\",\"specification_gitcommit.md\":\"CeXh2iUT\",\"specification_index.md\":\"BB5uhpou\",\"specification_vue3-best-dev-practices.md\":\"DO8lwLgu\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"nero-ui\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"i18nRouting\":true,\"logo\":\"https://vitejs.cn/vite3-cn/logo-with-shadow.png\",\"search\":{\"options\":{\"locales\":{\"root\":{\"placeholder\":\"搜索文档\",\"translations\":{\"button\":{\"buttonAriaLabel\":\"搜索文档\",\"buttonText\":\"搜索文档\"},\"modal\":{\"errorScreen\":{\"helpText\":\"你可能需要检查你的网络连接\",\"titleText\":\"无法获取结果\"},\"footer\":{\"closeText\":\"关闭\",\"navigateText\":\"切换\",\"searchByText\":\"搜索提供者\",\"selectText\":\"选择\"},\"noResultsScreen\":{\"noResultsText\":\"无法找到相关结果\",\"reportMissingResultsLinkText\":\"点击反馈\",\"reportMissingResultsText\":\"你认为该查询应该有结果？\",\"suggestedQueryText\":\"你可以尝试查询\"},\"searchBox\":{\"cancelButtonAriaLabel\":\"取消\",\"cancelButtonText\":\"取消\",\"resetButtonAriaLabel\":\"清除查询条件\",\"resetButtonTitle\":\"清除查询条件\"},\"startScreen\":{\"favoriteSearchesTitle\":\"收藏\",\"noRecentSearchesText\":\"没有搜索历史\",\"recentSearchesTitle\":\"搜索历史\",\"removeFavoriteSearchButtonTitle\":\"从收藏中移除\",\"removeRecentSearchButtonTitle\":\"从搜索历史中移除\",\"saveRecentSearchButtonTitle\":\"保存至搜索历史\"}}}}}},\"provider\":\"local\"}},\"locales\":{\"root\":{\"label\":\"简体中文\",\"lang\":\"zh-Hans\",\"description\":\"基于 Vue3 的企业级组件库\",\"base\":\"/\",\"themeConfig\":{\"darkModeSwitchLabel\":\"主题\",\"docFooter\":{\"next\":false,\"prev\":false},\"footer\":{\"copyright\":\"Copyright © 2024-2025 v1.0.0\",\"message\":\"基于 MIT 许可发布.\"},\"langMenuLabel\":\"多语言\",\"lastUpdated\":{\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"medium\"},\"text\":\"最后更新于\"},\"outline\":{\"label\":\"页面导航\"},\"returnToTopLabel\":\"回到顶部\",\"sidebar\":{\"/components/\":{\"base\":\"/components/\",\"items\":[{\"text\":\"可视化图表\",\"collapsed\":false,\"items\":[{\"text\":\"RNChartCore 核心图表\",\"link\":\"/RNChartCore\"},{\"text\":\"RNChartPie 环形统计\",\"link\":\"/RNChartPie\"},{\"text\":\"RNChartBar 柱状统计\",\"link\":\"/RNChartBar\"},{\"text\":\"RNChartLine 折线统计\",\"link\":\"/RNChartLine\"}]},{\"text\":\"反馈组件\",\"collapsed\":false,\"items\":[{\"text\":\"alert 消息弹窗\",\"link\":\"/alert\"},{\"text\":\"message 消息提示\",\"link\":\"/message\"},{\"text\":\"notification 消息通知\",\"link\":\"/notification\"},{\"text\":\"modal 弹层模态框\",\"link\":\"/modal\"}]},{\"text\":\"基础组件\",\"collapsed\":false,\"items\":[{\"text\":\"RNButtonAction 操作組\",\"link\":\"/RNButtonAction\"},{\"text\":\"RNButtonGroup 按钮组\",\"link\":\"/RNButtonGroup\"},{\"text\":\"RNCarousel 轮播面板\",\"link\":\"/RNCarousel\"},{\"text\":\"Tabs Panel 标签面板\",\"link\":\"/tabs-panel\"},{\"text\":\"Skeleton 骨架屏\",\"link\":\"/skeleton\"}]},{\"text\":\"布局组件\",\"collapsed\":false,\"items\":[{\"text\":\"RNTreePanel 树形面板\",\"link\":\"/RNTreePanel\"},{\"text\":\"RNStickyPane 粘性面板\",\"link\":\"/RNStickyPane\"}]},{\"text\":\"数据选择\",\"collapsed\":false,\"items\":[{\"text\":\"RNRadioGroup 单选框\",\"link\":\"/RNRadioGroup\"},{\"text\":\"RNCheckboxGroup 复选框\",\"link\":\"/RNCheckboxGroup\"},{\"text\":\"RNSelectNext 数据选择\",\"link\":\"/RNSelectNext\"},{\"text\":\"RNSelectTreeNext 数据选择\",\"link\":\"/RNSelectTreeNext\"}]},{\"text\":\"数据展示\",\"collapsed\":false,\"items\":[{\"text\":\"RNStatistic 数据统计\",\"link\":\"/RNStatistic\"},{\"text\":\"RNProgress 柱状进度和数据\",\"link\":\"/RNProgress\"},{\"text\":\"RNDashboard 环形进度和数据\",\"link\":\"/RNDashboard\"}]},{\"text\":\"有趣的组合\",\"collapsed\":false,\"items\":[{\"text\":\"RNCarousel 面板切换\",\"link\":\"/RNCarouselMix\"},{\"text\":\"RNCarousel 面板切换\",\"link\":\"/RNCarouselMix\"}]}]},\"/specification/\":{\"base\":\"/specification/\",\"items\":[{\"link\":\"codeInspection\",\"text\":\"代码检查\"},{\"link\":\"gitCommit\",\"text\":\"git提交\"}]}},\"sidebarMenuLabel\":\"菜单\"}}},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>